<template>
  <div>
    <div class="container">
      <!-- 添加按钮-->
      <el-button style="float: left;" type="primary" icon="el-icon-circle-plus-outline" @click="openAdd">添加秒杀商品
      </el-button>

      <el-form :inline="true" :model="editForm" class="user-search" style="float: right;">
        <!-- 下拉框状态-->
        <el-select v-model="editForm.codeName" placeholder="状态" class="handle-select mr10">
          <el-option key="1" label="上架中" value="13"></el-option>
          <el-option key="2" label="已下架" value="14"></el-option>
          <el-option key="3" label="已完成" value="32"></el-option>
        </el-select>
        <!-- 搜索框-->
        <el-input v-model="editForm.goodsName" placeholder="商品名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-form>

      <!-- 表格数据-->
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column header-align="center" align="center" type="index" label="序号" fixed="left"></el-table-column>
        <el-table-column prop="seckillId" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="seckillNum" label="商品数量" width="130" align="center"></el-table-column>
        <el-table-column prop="seckillPrice" label="秒杀价格" align="center"></el-table-column>
        <el-table-column prop="startTime" label="秒杀开始时间" align="center"></el-table-column>
        <!-- <el-table-column prop="sessions" label="活动场次" align="center"></el-table-column> -->
        <!-- <el-table-column prop="endTime" label="秒杀活动时间" width="130" align="center"></el-table-column> -->

        <el-table-column prop="codeName" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="
				                scope.row.codeName === '上架中'
				                    ? 'success'
				                    : scope.row.codeName === '已下架'
				                    ? 'danger'
                            : scope.row.codeName === '已完成'
                            ? 'info'
				                    : ''
				            ">{{ scope.row.codeName }}</el-tag>
          </template>
        </el-table-column>
        <!-- 按钮-->
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.state==14" type="text" icon="el-icon-caret-top"
              @click="start(scope.$index, scope.row)">上架</el-button>
            <el-button v-if="scope.row.state==13" type="text" icon="el-icon-caret-bottom" class="red"
              @click="stop(scope.$index, scope.row)">下架
            </el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
          :page-size="this.pageSize" :total="pageTotal" @size-change="handleSizeChange"
          @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="updform" label-width="70px">
        <el-form-item label="商品名称">
          <el-input v-model="updform.goodsName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="updform.seckillNum"></el-input>
        </el-form-item>
        <el-form-item label="秒杀价格">
          <el-input v-model="updform.seckillPrice"></el-input>
        </el-form-item>
        <!--        <el-form-item label="活动场次">
        	<el-input v-model="updform.sessions"></el-input>
        </el-form-item> -->
<!--        <el-form-item label="活动时间">
          <el-input v-model="updform.endTime"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="editVisible1" width="30%">
      <el-form ref="form" :model="addform" label-width="70px">
        <el-form-item label="分店编号">
          <!-- <el-select v-model="addform.shopsId" placeholder="分店编号" class="handle-select mr10">
            <el-option key="1" label="1" value="1"></el-option>
            <el-option key="2" label="2" value="2"></el-option>
            <el-option key="3" label="3" value="3"></el-option>
            <el-option key="4" label="4" value="4"></el-option>
            <el-option key="5" label="5" value="5"></el-option>
            <el-option key="6" label="6" value="6"></el-option>
          </el-select> -->
          <el-input v-model="addform.shopsId" :disabled="true"></el-input>
        </el-form-item>
        <!-- 一类名称-->
        <el-form-item label="一类名称">
          <el-select v-model="oneTypeValue" placeholder="请选择" class="handle-select mr10" @change="lookOneType()">
            <el-option v-for="item in oneTypeTable" :key="item.oneTypeId" :label="item.oneType" :value="item.oneTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 二类名称-->
        <el-form-item label="二类名称">
          <el-select v-model="typeNameValue" placeholder="请选择" class="handle-select mr10" @change="lookGoods()">
            <el-option v-for="item in typeNameTable" :key="item.categoryId" :label="item.typeName"
              :value="item.categoryId">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 三级下拉框-->
        <el-form-item label="商品名称">
          <el-select v-model="goodsNameValue" placeholder="请选择" class="handle-select mr10">
            <el-option v-for="item in goodsNameTable" :key="item.goodsId" :label="item.goodsName" :value="item.goodsId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="addform.seckillNum"></el-input>
        </el-form-item>
        <el-form-item label="秒杀价格">
          <el-input v-model="addform.seckillPrice"></el-input>
        </el-form-item>
        <!--          <el-form-item label="活动场次">
            <el-input v-model="addform.sessions"></el-input>
          </el-form-item> -->
<!--        <el-form-item label="活动时间">
          <el-input v-model="addform.endTime"></el-input>
        </el-form-item> -->
        <div class="block">
          <span class="demonstration">开始时间</span>
          <el-date-picker v-model="addform.startTime" type="date" value-format="yyyyMMdd" placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exit">取 消</el-button>
        <el-button type="primary" @click="saveAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.handleSearch()
    },
    data() {
      return {
        editForm: {
          goodsName: "",
          codeName: ""
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        editVisible1: false,
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 5,
        form: {
          seckillId: "",
          goodsName: "",
          seckillNum: "",
          seckillPrice: "",
          startTime: "",
          // sessions:"",
          endTime: "",
          codeName: ""
        },
        addform: {
          seckillId: "",
          shopsId: "",
          goodsId: "",
          seckillNum: "",
          seckillPrice: "",
          startTime: "",
          endTime: ""
        },
        updform: {
          seckillId: "",
          goodsName: "",
          seckillNum: "",
          seckillPrice: "",
          startTime: "",
          // sessions:"",
          endTime: ""
        },
        idx: -1,
        id: -1,
        oneTypeValue: '',
        oneTypeTable: '',
        typeNameValue: "",
        typeNameTable: "",
        goodsNameValue: "",
        goodsNameTable: ""
      };
    },
    methods: {
      // 触发搜索按钮
      handleSearch() {
        console.log(this.editForm.codeName)
        let state
        if (this.editForm.codeName == "" || this.editForm.codeName == null) {
          state = 0
        } else {
          state = this.editForm.codeName
        }
        console.log(state)
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$axios.post('/adminSeckill/seckillList', this.$qs.stringify({
          pagenum: this.$data.pageIndex,
          pagesize: this.$data.pageSize,
          state: state,
          goodsName: this.editForm.goodsName,
          shopsId: userInfo.shopsId,
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })).then(response => {
          console.log(response)
          if (response.data != null) {
            console.log(response.data)
            // 接收后台发来的map集合table是表数据，total是总数
            this.tableData = response.data.table
            this.pageTotal = response.data.total
            // for(let i=0;i<this.tableData.length;i++){
            //   this.tableData[i].endTime =  this.tableData[i].endTime +"秒"
            //   this.tableData[i].sessions =  this.tableData[i].sessions +"场"
            // }
          }
        }).catch(err => {
          alert(err)
        })
      },
      // 上架按钮
      start(index, row) {
        this.$confirm('此操作将上架该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$axios.post('/adminSeckill/startSeckill', this.$qs.stringify({
            seckillId: row.seckillId,
          })).then(response => {
            console.log(response)
            if (response.data != null) {
              console.log('数据接收');
              console.log(response.data)
              if (response.data == '1') {
                this.$message({
                  type: 'success',
                  message: '上架成功!'
                });
                this.handleSearch();
              } else {
                this.$message({
                  type: 'fail',
                  message: '上架失败!'
                });
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          });
        });
      },
      // 下架按钮
      stop(index, row) {
        this.$confirm('此操作将下架该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$axios.post('/adminSeckill/stopSeckill', this.$qs.stringify({
            seckillId: row.seckillId,
          })).then(response => {
            console.log(response)
            if (response.data != null) {
              console.log('数据接收');
              console.log(response.data)
              if (response.data == '1') {
                this.$message({
                  type: 'success',
                  message: '下架成功!'
                });
                this.handleSearch();
              } else {
                this.$message({
                  type: 'fail',
                  message: '下架失败!'
                });
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });
      },
      //添加按钮
      openAdd() {
        this.editVisible1 = true;
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.addform.shopsId=userInfo.shopsId,
        this.$axios.post('/adminGoods/category')
          .then(response => {
            this.oneTypeTable = response.data
          })
      },
      //取消添加
      exit() {
        this.editVisible1 = false;
        this.addform.seckillId = "",
          this.addform.shopsId = "",
          this.addform.goodsName = "",
          this.addform.seckillNum = "",
          this.addform.seckillPrice = "",
          this.addform.startTime = "",
          this.addform.endTime = "",
          this.oneTypeValue = '',
          this.oneTypeTable = '',
          this.typeNameValue = "",
          this.typeNameTable = "",
          this.goodsNameValue = "",
          this.goodsNameTable = ""
      },
      //添加操作
      saveAdd() {
        this.$axios.post(
            '/adminSeckill/addSeckill', this.$qs.stringify({
              shopsId: this.$data.addform.shopsId,
              goodsId: this.goodsNameValue,
              seckillNum: this.$data.addform.seckillNum,
              seckillPrice: this.$data.addform.seckillPrice,
              startTime: this.$data.addform.startTime,
              endTime: this.$data.addform.endTime,
            }))
          .then(response => {
            if (response.data != null) {
              console.log(response.data)
              if (response.data == '1') {
                this.$message({
                  type: 'success',
                  message: '添加成功!',
                });
                this.$data.addForm = false;
                this.addform.seckillId = "",
                  this.addform.shopsId = "",
                  this.addform.goodsName = "",
                  this.addform.seckillNum = "",
                  this.addform.seckillPrice = "",
                  this.addform.startTime = "",
                  this.addform.endTime = "",
                  this.oneTypeValue = '',
                  this.oneTypeTable = '',
                  this.typeNameValue = "",
                  this.typeNameTable = "",
                  this.goodsNameValue = "",
                  this.goodsNameTable = ""
                // window.location.reload() // 强制刷新
                this.handleSearch();
              } else {
                this.$message({
                  type: 'fail',
                  message: '添加失败!'
                });
              }
            }
          })
        this.editVisible1 = false;
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 编辑操作
      handleEdit(index, row) {
        this.editVisible = true;
        this.updform.seckillId = row.seckillId;
        this.updform.goodsName = row.goodsName;
        this.updform.seckillNum = row.seckillNum;
        this.updform.seckillPrice = row.seckillPrice;
        // this.updform.sessions = row.sessions;
        this.updform.endTime = row.endTime;
      },
      // 保存编辑
      saveEdit() {
        this.$axios.post(
            '/adminSeckill/updSeckill', this.$qs.stringify({
              seckillId: this.$data.updform.seckillId,
              seckillNum: this.$data.updform.seckillNum,
              seckillPrice: this.$data.updform.seckillPrice,
              // sessions:this.$data.updform.sessions,
              // endTime: this.$data.updform.endTime
            }))
          .then(response => {
            if (response.data != null) {
              console.log(response.data)
              if (response.data == '1') {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
            
                });
                this.$data.addVisible1 = false;
                this.handleSearch();
              } else {
                this.$message({
                  type: 'fail',
                  message: '修改失败!'
                });
              }
            }
          })
        this.editVisible = false;
        // this.tableData[this.idx].goodsName = this.form.goodsName;
      },
      // 分页导航
      handlePageChange(val) {
        this.pageIndex = val
        this.handleSearch();
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.handleSearch();
      },
      lookOneType() {
        this.typeNameTable = "",
          this.goodsNameTable = "",
          this.typeNameValue = "",
          this.goodsNameValue = "",
          this.$axios.post(
            '/adminGoods/categoryLookOneTypeId', this.$qs.stringify({
              oneTypeId: this.oneTypeValue
            }))
          .then(response => {
            this.typeNameTable = response.data
          })
      },
      lookGoods() {
        this.goodsNameTable = "",
          this.goodsNameValue = "",
          this.$axios.post(
            '/adminGoods/lookShopsId', this.$qs.stringify({
              categoryId: this.typeNameValue
            }))
          .then(response => {
            this.goodsNameTable = response.data
          })
      },
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
